<template>
  <el-card class="container">
    <!-- 顶部筛选栏 -->
    <div class="filter-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item class="button-container" label="维度">
  <el-button-group>
    <el-button type="primary">仓库</el-button>
    <el-button type="primary">商品</el-button>
  </el-button-group>
</el-form-item>

        </el-col>
        <el-col :span="4">
        <el-form-item label="仓库">
          <el-select v-model="filterWarehouse" placeholder="请选择仓库" clearable>
            <el-option label="苏州园区" value="suzhou" />
            <el-option label="南京园区" value="nanjing" />
            <!-- 其他仓库选项 -->
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品名称">
          <el-input v-model="filterProductName" placeholder="商品名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品编号">
          <el-input v-model="filterProductId" placeholder="商品编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="规格名称">
          <el-input v-model="filterSpecName" placeholder="规格名称" />
        </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="规格名称">
          <el-input v-model="filterSpecId" placeholder="规格编号" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <div class="table-header">
        <h3>库存统计</h3>
        <el-checkbox v-model="filterZeroStock">过滤掉库存为0的商品</el-checkbox>
      </div>
      
      <el-table :data="pagedData" border>
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column label="商品信息">
          <template #default="{ row }">
            <div>{{ row.productName }}</div>
            <div>商品编号：{{ row.productId }}</div>
          </template>
        </el-table-column>
        <el-table-column label="规格信息">
          <template #default="{ row }">
            <div>{{ row.specName }}</div>
            <div>规格编号：{{ row.specId }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="120" align="right">
          <template #default="{ row }">
            {{ row.stock.toLocaleString() }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  Edit,
  Share,
} from '@element-plus/icons-vue'

interface StockItem {
  warehouse: string
  productName: string
  productId: string
  specName: string
  specId: string
  stock: number
}

// 模拟数据（根据图片内容）
const tableData: StockItem[] = [
  {
    warehouse: '苏州园区',
    productName: '华为nova',
    productId: 'HW-001',
    specName: '黑',
    specId: '00001',
    stock: 9888
  },{
    warehouse: '苏州园区',
    productName: '华为nova',
    productId: 'HW-001',
    specName: '黑',
    specId: '00001',
    stock: 9888
  },{
    warehouse: '苏州园区',
    productName: '华为nova',
    productId: 'HW-001',
    specName: '黑',
    specId: '00001',
    stock: 9888
  },{
    warehouse: '苏州园区',
    productName: '华为nova',
    productId: 'HW-001',
    specName: '黑',
    specId: '00001',
    stock: 9888
  },{
    warehouse: '苏州园区',
    productName: '华为nova',
    productId: 'HW-001',
    specName: '黑',
    specId: '00001',
    stock: 9888
  },
  // 其他数据项...
]

// 筛选条件
const filterWarehouse = ref('')
const filterProductName = ref('')
const filterProductId = ref('')
const filterSpecName = ref('')
const filterSpecId = ref('')
const filterZeroStock = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = 10
const total = ref(61)

// 计算属性
const filteredData = computed(() => {
  return tableData.filter(item => {
    return (
      (!filterWarehouse.value || item.warehouse.includes(filterWarehouse.value)) &&
      (!filterProductName.value || item.productName.includes(filterProductName.value)) &&
      (!filterProductId.value || item.productId.includes(filterProductId.value)) &&
      (!filterZeroStock.value || item.stock > 0)
    )
  })
})

const pagedData = computed(() => {
  return filteredData.value.slice(
    (currentPage.value - 1) * pageSize,
    currentPage.value * pageSize
  )
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleReset = () => {
  filterWarehouse.value = ''
  filterProductName.value = ''
  filterProductId.value = ''
  filterSpecName.value = ''
  filterSpecId.value = ''
}
</script>

<style scoped>
.container {
  margin: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pagination {
  margin-top: 15px;
  justify-content: flex-end;
}

.el-table {
  margin-top: 15px;
}

.el-col {
  margin-bottom: 10px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 按钮间距 */
  max-width: 300px; /* 根据实际容器宽度调整 */
}

.el-button-group {
  display: inline-flex !important;
  margin: 4px; /* 组间距 */
}
</style>